<template>
    <div id="container">
        <div id="background" />
        <div id="title">
            <h1>精选好物 任你挑选</h1>
        </div>
        <div class="input">
            <el-input 
                v-model="username"
                prefix-icon="User"
                placeholder="请输入用户名"
            />
        </div>
        <div class="input">
            <el-input 
                v-model="password"
                prefix-icon="Lock"
                placeholder="请输入密码"
            />
        </div>
        <div class="input">
            <el-button
                style="width: 350px"
                type="primary"
                :disabled="disabled"
                @click="login"
            >
                登录
            </el-button>
            <el-button
                style="width: 150px"
                type="default"
                :disabled="disabled"
                @click="signup"
            >
                注册
            </el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { startRequest, RequestPath, LoginResponseData } from '../base/RequestWork.js';
import { PageName } from '../base/Router.js';
import { useAccountStore } from '../base/AccountStore.js';

// 状态数据
const accountStore = useAccountStore();
// 路由管理对象
const router = useRouter();

let username = ref('');
let password = ref('');
// 控制登录和注册按钮是否可以点击
let disabled = computed(() => {
    return !(username.value.length > 0 && password.value.length > 0)
});
// 预留登录方法
const login = async () => {
    // 发起登录请求
    try {
        const response = await startRequest(RequestPath.login, 'post', {
            username: username.value,
            password: password.value
        });
        let data = response.data as LoginResponseData
        if (data.msg === 'ok') {
            // 如果成功，则刷新账户状态
            accountStore.login({
                userInfo: data.info,
                token: data.token
            });
            // 弹出消息提醒，当消息提示栏自动消失时跳转到首页
            ElMessage.success({
                message: '登录成功',
                onClose: () => {
                    router.push({
                        name: PageName.home
                    });
                }
            });
        } else {
            // 如果登录失败，则将后端返回的失败信息提示给用户
            ElMessage.error(data.error ?? '登录异常，请稍后重试');
        }
    } catch (error) {
        console.log('error', error)    
    }
};
// 预留注册方法
const signup = async () => {
    try {
        // 发起注册请求
        const response = await startRequest(RequestPath.signup, 'post', {
            username: username.value,
            password: password.value,
            role: 'normal', // 默认用户端注册的账号角色为normal
        });
        // 注册成功，则提示用户去登录
        let data = response.data as LoginResponseData;
        if (data.msg === 'ok') {
            ElMessage.success({
                message: '注册成功，请您登录'
            });
        } else {
            ElMessage.error(data.error ?? '注册异常，请稍后重试');
        }
    } catch (error) {
        console.log(error);
    }


};
</script>
<style scoped>
#container {
    height: 100%;
    width: 100%;
    position: absolute;
}
#background {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/src/assets/background.webp");
    filter: blur(5px);
    background-size: cover;
    z-index: -1;
}
#title{
    text-align: center;
    color: azure;
    margin-top: 200px;
}
.input {
    margin: 20px auto;
    width: 515px;
}
</style>